<template>
	<view class="main">
		<u-navbar :is-back="true" title="店铺满减" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="tab">
			<view :class="tab==1?'tabs':'tabsed'" @click="change">
				<text>进行中</text>
				<view v-if="tab==1"
					style="width: 40rpx;height: 4rpx;background: #FF0000; position: absolute; top: 86rpx;">
				</view>
			</view>
			<view style="width:4rpx;height: 30rpx; background-color: #c3c3c3;">
			</view>
			<view :class="tab==2?'tabs':'tabsed'" @click="change2">
				<text>已过期</text>
				<view v-if="tab==2"
					style="width: 40rpx;height: 4rpx;background: #FF0000; position: absolute; top: 86rpx;">
				</view>
			</view>
		</view>
		<block v-if="tab==1">
			<view class="whole">
				<view class="discount" v-for="(item,index) in shoplist" :key="index" v-if="item.status==1">
					<image src="../../../static/images/yhj.png" mode=""></image>
					<view class="left">
						<view class="top">
							<text>￥</text>{{item.reduce}}
						</view>
						<text>满{{item.threshold}}元</text>
					</view>
					<view class="right">
						<view class="title">
							{{item.name}}
						</view>
						<text>{{item.start_time}} 至 {{item.end_time}}</text>
					</view>
				</view>
			</view>
		</block>
		<block v-if="tab==2">
			<view class="whole">
				<view class="discount" v-for="(item,index) in shoplist" :key="index" v-if="item.status==0">
					<image src="../../../static/images/yhjed.png" mode=""></image>
					<view class="left">
						<view class="top">
							<text>￥</text>{{item.reduce}}
						</view>
						<text>满{{item.threshold}}元</text>
					</view>
					<view class="right">
						<view class="title">
							{{item.name}}
						</view>
						<view class="status">
							过期
						</view>
						<text>{{item.start_time}} 至 {{item.end_time}}</text>
					</view>
				</view>
			</view>
		</block>
		<view class="confirm" v-if="tab==1" @click="router">
			新建活动
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				type: '',
				tab: 1,
				shoplist: [],

			}
		},
		onLoad() {
			var that = this
			uni.showLoading({
				title: '加载中',
			});
			setTimeout(function() {
				uni.hideLoading();
				that.getshoplist()
			}, 300);

		},
		mounted() {

		},
		onShow() {},
		methods: {
			//获取商品列表
			getshoplist() {
				global.$http.request({
					url: '/shopapi/activity/minuslist',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.shoplist = res.data.data
					}
				})
			},

			change() {
				this.tab = 1
				console.log(this.tab);
			},
			change2() {
				this.tab = 2
				console.log(this.tab);
			},
			router() {
				uni.navigateTo({
					url: '../new_activity/new_activity'
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;
		// padding-bottom: 150rpx;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.tab {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-around;
				position: relative;

				.tabs {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF0000;
					width: 300rpx;
					text {
						padding: 31rpx 0;
					}
				}

				.tabsed {
					width: 300rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000;

					text {
						padding: 31rpx 0;
					}
				}
			}

			.whole {
				margin-bottom: 180rpx;

				.discount {
					position: relative;
					width: 690rpx;
					margin: 30rpx auto 60rpx auto;
					display: flex;

					image {
						width: 690rpx;
						height: 146rpx;
						position: absolute;
						top: 0;
						z-index: -1;
					}

					.left {
						padding-top: 25rpx;
						width: 135rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						text {
							font-size: 18rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

						.top {
							font-size: 46rpx;
							font-weight: bold;
							color: #FFFFFF;

							text {
								font-size: 26rpx;
								font-weight: bold;
								color: #FFFFFF;
							}
						}
					}

					.right {
						width: 520rpx;
						margin: 20rpx 0 0 40rpx;
						position: relative;

						.status {
							position: absolute;
							top: 0;
							right: 19rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

						.title {
							width: 450rpx;
							height: 50rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							position: absolute;
							top: 0;
							left: 0;
							font-size: 32rpx;
							font-weight: 400;
							color: #FFFFFF;
						}

						text {
							position: absolute;
							bottom: 0;
							right: 20rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}



			.confirm {
				position: fixed;
				bottom: 0;
				margin-top: 100rpx;
				width: 750rpx;
				text-align: center;
				padding: 34rpx 0;
				background: #FE4E00;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
